<template>
  <div class="icon-body">
    <el-input
      v-model="iconName"
      class="icon-search"
        :prefix-icon="iconName.substr(0,1).toUpperCase()+iconName.substr(1)"
      clearable
      placeholder="请输入图标名称"
      @clear="filterIcons"
      @input="filterIcons"
      @focus="iconFlag=true"
    >
   
    </el-input>
    <div class="icon-list" v-show="iconFlag">
      <div class="list-container">
     
        <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
          <div :class="['icon-item', { active: activeIcon === item }]">
            <!-- 图标 -->
            <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
            <!-- 名称 add-->
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import icons from './requireIcons'
import { ref, reactive,watch } from 'vue';
// 父传子 激活图表的名称
const props = defineProps({
  activeIcon: {
    type: String
  },
  nowIcon:{
    type:String
  }
})
let iconFlag=ref(false)
const iconName = ref('')
const iconList = ref(icons)
const emit = defineEmits(['selected'])
// 设计的父传子图表  进行回显
watch(()=>props.nowIcon,(newVal)=>{
    if(newVal){
      iconName.value=newVal
    }
})
function filterIcons() {
  iconList.value = icons
  if (iconName.value) {
    iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
  }
}
// 每个图标的点击事件
function selectedIcon(name) {
  // 子传父图标名称
  emit('selected', name)
  iconName.value=name;
  iconFlag.value=false//关闭
  document.body.click()
}

function reset() {
  iconName.value = ''
  iconList.value = icons
}

defineExpose({
  reset
})
</script>

<style lang='scss' scoped>
   .icon-body {
    width: 100%;
    padding: 10px;
    position: reactive;
    .icon-search {
      position: relative;
      margin-bottom: 5px;
    }
    .icon-list {
      position: absolute;
      top:50px;
      left :0;
      background: white;
      width: 500px;
      z-index:999;
      height: 200px;
      overflow: auto;
      .list-container {
        display: flex;
        flex-wrap: wrap;
        .icon-item-wrapper {
          width: calc(100% / 3);
          height: 25px;
          line-height: 25px;
          cursor: pointer;
          display: flex;
          .icon-item {
            display: flex;
            max-width: 100%;
            height: 100%;
            padding: 0 5px;
            &:hover {
              background: #ececec;
              border-radius: 5px;
            }
            .icon {
              flex-shrink: 0;
            }
            span {
              display: inline-block;
              vertical-align: -0.15em;
              fill: currentColor;
              padding-left: 2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .icon-item.active {
            background: #ececec;
            border-radius: 5px;
          }
        }
      }
    }
  }
</style>